<template>
  <div class="product-container">
    <el-row>
      <el-col :span="24">
        <normal-filter :filterProps="filterProps" />
      </el-col>
    </el-row>
    <el-row>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="$router.push('/banner/add')"
        >添加banner</el-button
      >
      <!-- <el-button type="primary" icon="el-icon-plus" @click="show = true"
        >添加轮播类型</el-button
      > -->
    </el-row>
    <el-row class="table-container">
      <Table
        :columnProps="columnProps"
        :tableData="tableData"
        :showHandle="true"
        :pagination="pagination"
        @currentPage="goCurrent"
        @sizeChange="sizeChange"
        @delete="del"
        @modify="modify"
      />
    </el-row>
    <el-dialog :visible.sync="show" title="添加banner类型" width="600px">
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-form-item
            label="类型名称："
            prop="name"
            :rules="[{ required: true, message: '类型名称不能为空' }]"
          >
            <el-input
              v-model="form.name"
              placeholder="请输入类型名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="编码："
            prop="code"
            :rules="[{ required: true, message: '编码不能为空' }]"
          >
            <el-input v-model="form.code" placeholder="请输入编码"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import Table from "@/components/Table";
import { getList, addBannerType, bannerTypeList, delItem } from "@/api/banner";
import { pagination, page } from "@/utils/enumConfig";
import { Message } from "element-ui";

export default {
  name: "Banner",
  components: {
    normalFilter,
    Table
  },
  data() {
    const filterProps = {
      filterItems: [
        {
          type: "input",
          id: "link",
          title: "链接",
          placeholder: "请输入"
        }
      ],
      onFilterChange: value => {
        this.filterParam = value;
        this.getList({
          ...value,
          ...page
        });
      }
    };
    const columnProps = [
      
      {
        title: "封面图",
        dataIndex: "imageUrl",
        key: "imageUrl",
        render: record => {
          return `<img style="width:150px;height:80px;object-fit:contain" src="${record.imageUrl}"></img>`;
        }
      },
      {
        title: "链接",
        dataIndex: "link",
        key: "link",
        align: "center"
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime"
      },
      {
        title: "类型",
        dataIndex: "type",
        key: "type"
      }
    ];
    return {
      filterProps,
      columnProps,
      list: [],
      tableData: [],
      pagination: this.$_.cloneDeep(pagination),
      filterParam: null,
      form: {
        name: "",
        code: ""
      },
      show: false
    };
  },
  async mounted() {
    let { pageIndex } = this.pagination;
    let param = {
      current: pageIndex
    };
    // let typeList = await bannerTypeList({ parentCode: "banner" });
    let _filterProps = this.filterProps;
    let _filterItems = this.filterProps["filterItems"];
    _filterItems.push({
      type: "select",
      id: "type",
      title: "banner类型",
      placeholder: "请选择",
      options: [
        {
          title:'全部',
          value:''
        },
        {
          title:'公司介绍',
          value:'公司介绍'
        },
        {
          title:'文章',
          value:'文章'
        },
        {
          title:'产品',
          value:'产品'
        }
      ]
    });
    _filterProps["filterItems"] = _filterItems;
    this.$set(this.filterProps,'filterItems',_filterItems)
    this.getList(param);
  },
  methods: {
    goCurrent(currentIndex) {
      console.log(currentIndex);
      let { pageSize, pageIndex } = this.pagination;
     let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };

      this.getList(param);
    },
    modify({ id }) {
      this.$router.push({ path: `/banner/update/${id}` });
    },

    async del({ id }) {
      let res = await delItem({ id });
      if (res.code === 1) {
        let { pageIndex } = this.pagination;
        this.getList({
          ...this.filterParam,
          current: 1
        });
      }
    },
    async getList(param) {
      let { records, size, total, current } = await getList({
          ...param,
          size: 10,
        }),
        page = this.pagination;
      this.pagination = {
        ...page,
        totalElements: total,
        pageIndex: current
      };
      this.tableData = records;
    },
    sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.getList(param);
    },
    onSubmit() {
      const { validate } = this.$refs["form"];
      // const { validate: test1 } = this.$refs["subForm"];
      // test1(valid => {
      //   if (valid) {
      //   }
      // });
      validate(valid => {
        if (valid) {
          this._submitData({ parentCode: "banner", ...this.form });
        }
      });
    },
    async _submitData(params) {
      let res = await addBannerType(params);
      if (res && res.code === 1) {
        Message({
          message: "保存成功！",
          type: "success",
          duration: 1 * 1000
        });
        // this.getList();
        this.show = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.product-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .table-container {
    margin-top: 20px;
  }
}
</style>
